<template>
  <vue-modal
    @submitData="closeModal"
    modalTitle="链接地址"
    modalName="showLinkModal"
    modalWidth="500"
    ref="showLinkModal">
    <div class="href-box" slot="content">
      <div>
        <h3>公告内容</h3>
        <span class="content-span">{{content}}</span>
      </div>
      <div>
        <h3>对应链接</h3>
        <span>{{link}}</span>
        <a class="toLink" :href="link" target="_blank">[ 点击访问 ]</a>
      </div>

    </div>

  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';

  export default {
    name: "ShowLinkTemplate",
    data() {
      return {
        link: '', // 展示的链接
        content: '', // 公告的内容
      }
    },
    components: {
      VueModal
    },
    methods: {
      show(rowData) {
        this.link = rowData.link;
        this.content = rowData.content;
        this.$refs.showLinkModal.show();
      },
      closeModal() {
        this.$refs.showLinkModal.closeModal();
      },

    }
  }
</script>

<style scoped>
  h3 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  h3:first-child {
    margin-top: 0px;
  }
  .content-span {
    display: block;
    margin-bottom: 20px;
  }
  span {
    margin-left: 10px;
    font-size: 14px;
  }

  .href-box {
    width: 100%;
    word-wrap: break-word;
  }
  .toLink {
    font-size: 12px;
    margin-left: 10px;
    color: #409EFF;
    font-weight: bold;
    cursor: pointer;
  }
</style>